---
# slug是页面路径，不能重复
slug: privateCss
title: 解决样式私有化问题
authors: []
tags: [react,privateCss]
---
## cssModule解决样式冲突问题

> 开箱自带,不需要安装任何东西,但是对于scss等需要配置loader
---

### 1.准备工作
* 将css文件命名为`xxx.module.css`

### 2.导入对应的组件中

`import sty from "./link.module.css"`

### 3.使用

```jsx
import sty from './style/Link.module.css';
export const LinkCssModule = ()=>{
    return (
        <>
            <div className={sty.box}>
                <div>
                    hello world
                </div>
            </div>
        </>
    )
}
```
## reactJss解决样式私有化问题

### 1.安装
```shell
npm install react-jss
```
---

### 2.在组件中使用,需要先导入一个方法
```jsx
import {createUseStyle} from 'react-jss';
```
---
### 3.导入的这个方法是个hooks，将样式类名写在里面
> 对于嵌套的样式要使用`&`表明
```jsx
const useStyles = createUseStyles({
    title:{
        background: 'lightblue',
        '&:hover': {
            color: 'red',
        }
    },
    list:{
        background: 'lavender',
        '& a':{ //针对a标签设置样式
            color: 'red',
            '&:hover': { //针对a标签的鼠标悬浮设置样式
                color: 'blue',
            }
        }
    }
})
```

### 4.使用返回的useStyle

```jsx
const {title,list} = useStyles();
return (
    <>
        <div className={title}>
            链接标题
        </div>
        <div className={list}>
            <a href={'http://localhost:8080/'}>
                hello world
            </a>
        </div>
    </>
)
```

### 进阶使用

#### 1.自定义样式属性

> 根据使用useStyles函数传进来的参数`props`指定样式
```jsx
const useStyles = createUseStyles({
    title:{
        background: 'lightblue',
        '&:hover': {
            color: props=>{
                return props.color
            },
        }
    }
})


const {title} = useStyles({
    color:'red'
});
```

#### 2.自定义样式对象
```jsx
const useStyles = createUseStyles({
    title:props=>{
        return props.title;
    }
})


const {title} = useStyles({
    title:{
        background: 'lightblue',
        '&:hover': {
            color: props=>{
                return props.color
            },
        }
    }
});
```

### 总结：使用`react-jss`解决样式私有化问题整体代码
```jsx
import React from 'react';
import {createUseStyles} from "react-jss";
const useStyles = createUseStyles({
    title:{
        background: 'lightblue',
        '&:hover': {
            color: 'red',
        }
    },
    list:{
        background: 'lavender',
        '& a':{ //针对a标签设置样式
            color: 'red',
            '&:hover': { //针对a标签的鼠标悬浮设置样式
                color: 'blue',
            }
        }
    }
})
export const LinkReactJss = ()=>{
    const {title,list} = useStyles();
    return (
        <>
            <div className={title}>
                链接标题
            </div>
            <div className={list}>
                <a href={'http://localhost:8080/'}>
                    hello world
                </a>
            </div>
        </>
    )
}
```
---

## styled-components 解决样式私有化问题

* 如果在vs-code中编写样式没有提示,安装一个`vscode-styled-components`插件

### 1.安装

```shell
npm install styled-components
```
---
### 导入

```jsx
import styled from 'styled-components';
```
---
### 使用
1. 必须得是**模板字符串**
2. 外层是什么标签就得`styled.xx`

```jsx
const List = styled.div`
    background: lavender;
    '&:a' :{ //针对a标签设置样式
        color: red;
            '&:hover': { //针对a标签的鼠标悬浮设置样式
                color: blue;
            }
    }
    .innerBox{
        color:aquamarine;
    }
`

```
要渲染的组件是这样的
**所以就得是styled.div**
```jsx
<div>
    <a href={'http://localhost:8080/'}>
        hello world
    </a>
    <div className={'innerBox'}>
        inner box
    </div>
</div>
```
---
### 使用
> 使用`styled.xx`返回的标签替换要替换的标签

```jsx
<List>
    <a href={'http://localhost:8080/'}>
        hello world
    </a>
    <div className={'innerBox'}>
        inner box
    </div>
</List>
```

### styled-components完整代码

```jsx
import React from 'react';
import styled from 'styled-components';
//外层标签是什么就是styled.什么
//必须得是模板字符串
const Title = styled.div`
background-color: lightblue;
    color: black;
    &:hover {
        color: rebeccapurple;
    }
`
const List = styled.div`
    background: lavender;
    '&:a' :{ //针对a标签设置样式
        color: red;
            '&:hover': { //针对a标签的鼠标悬浮设置样式
                color: blue;
            }
    }
    .innerBox{
        color:aquamarine;
    }
`
export const LinkStyledComp = ()=>{
    return (
        <>
            <Title>
                链接标题
            </Title>
            <List>
                <a href={'http://localhost:8080/'}>
                    hello world
                </a>
                <div className={'innerBox'}>
                    inner box
                </div>
            </List>
        </>
    )
}
```
